<!--
 * @FileDescription 数据面板
 * @Author lz
 * @Date 20230322 17:11:40
 * @LastEditors lz
 * @LastEditTime 20230322 17:11:40
-->
<template>
    <div class="DataBox">
        <div class="row_1">
            <div class="numVal">{{ HomeContent.Default.Apo_Speed.value }}</div>
            <div class="unit">km/h</div>
            <div class="Brake">
                <div class="col_1">
                    <span class="c1_l">
                        Brake
                    </span>
                    <span class="c1_r">
                        {{ HomeContent.Default.Apo_Brake.value }}%
                    </span>
                </div>
                <a-slider v-model:value="HomeContent.Default.Apo_Brake.value" :min="0" :max="100" class="slider1" />
            </div>
            <div class="Accelerator">
                <div class="col_1">
                    <span class="c1_l">
                        Accelerator
                    </span>
                    <span class="c1_r">
                        {{ HomeContent.Default.Apo_Accelerator.value }}%
                    </span>
                </div>
                <a-slider v-model:value="HomeContent.Default.Apo_Accelerator.value" :min="0" :max="100" class="slider2" />
            </div>
        </div>
        <div class="row_1">
            <div class="numVal_2">{{ HomeContent.Default.Apo_Angle.value }}<span class="percentage">%</span></div>

            <img src="/apoImg/cly_jl.png" class="cly_jl" @click="increase()">
            <img src="/apoImg/cly_jr.png" class="cly_jr" @click="reduce()">
            <img src="/apoImg/cly.png" class="cly">
            <img src="/apoImg/cly_zhuan.png" class="cly_zhuan">
        </div>
        <div class="row_2">
            <div class="NOSignal">
                NO SIGNAL
            </div>
            <div class="chassisError">
                //@ts-ignore
                CHASSIS <br /> ERROR
            </div>
        </div>
        <div class="row_3">
            <img src="/apoImg/dianchi.png" class="dianchi">
            <span class="poe">61%</span>
        </div>
        <div class="row_4">
            <span class="Gear">Gear</span>
            <span>D</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref, watch } from 'vue'
import HomeContent from "@components/Apps/Simulation/HomeContent";
const inputValue1 = ref<number>(0);
const inputValue2 = ref<number>(0);
//方向
const direction = ref<string>(`rotate(${HomeContent.Default.Apo_Angle.value}deg) `)

watch(() => HomeContent.Default.Apo_Angle.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        direction.value = `rotate(${HomeContent.Default.Apo_Angle.value}deg) `
    }
})

const state = reactive({
    numVal_2: 0,
});
function increase() {
    state.numVal_2++
}
function reduce() {
    state.numVal_2--
}
</script>

<style scoped>
.DataBox {
    position: absolute;
    top: 77px;
    right: 22px;
    width: 225px;
}

.row_1 {
    width: 225px;
    height: 110px;
    background: #000000;
    margin-bottom: 7px;
    position: relative;
}

.row_2 {
    width: 225px;
    height: 35px;
    background: #000000;
    margin-bottom: 8px;
}

.row_4 {
    width: 225px;
    height: 35px;
    background: #000000;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 35px;
}

.row_3 {
    width: 225px;
    height: 35px;
    background: #01090F;
    margin-bottom: 8px;
    line-height: 35px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
}

.numVal {
    font-size: 30px;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    left: 18px;
    top: 25px;
}

.numVal_2 {
    font-size: 30px;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    left: 18px;
    top: 30px;
}

.unit {
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    left: 18px;
    top: 60px;
}

.col_1 {
    color: #fff;
    overflow: hidden;
}

.c1_l {
    float: left;
}

.c1_r {
    float: right;
}

.Brake {
    width: 130px;
    position: absolute;
    right: 10px;
    top: 15px;
}

.Accelerator {
    width: 130px;
    position: absolute;
    right: 10px;
    bottom: 15px;
}

.percentage {
    font-size: 14px;
    font-weight: 800;
    color: #707471;
    display: inline-block;
    margin-left: 6px;
}

.slider1 {
    margin: 4px 0;
}

.slider1 :deep().ant-slider-track {
    background-color: #8F1923;
}

.slider1 :deep().ant-slider-rail {
    background-color: #270C0D;
}

.slider1 :deep().ant-slider-handle {
    border-radius: 0;
    width: 10px;
    height: 10px;
    top: 6px;
    border: none;
    background-color: #8F1923;
}

.slider2 {
    margin: 4px 0;
}

.slider2 :deep().ant-slider-track {
    background-color: #0E70FB;
}

.slider2 :deep().ant-slider-rail {
    background-color: #09214C;
}

.slider2 :deep().ant-slider-handle {
    border-radius: 0;
    width: 10px;
    height: 10px;
    top: 6px;
    border: none;
    background-color: #0E70FB;
}

.cly_jl {
    width: 15px;
    height: 23px;
    position: absolute;
    left: 94px;
    top: 43px;
}

.cly_jr {
    width: 15px;
    height: 23px;
    position: absolute;
    right: 15px;
    top: 43px;
}

.cly {
    width: 75px;
    height: 75px;
    position: absolute;
    top: 15px;
    left: 114px;
}

.cly_zhuan {
    width: 10px;
    height: 36px;
    position: absolute;
    top: 17px;
    right: 68px;
    transform: v-bind(direction);
    transform-origin: 50% 100%;
}

.NOSignal {
    width: 116px;
    height: 35px;
    background: #000000;
    float: left;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 35px;
    text-align: center;
}

.chassisError {
    padding-top: 6px;
    width: 104px;
    height: 35px;
    background-color: #27141B;
    float: right;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 12px;
    text-align: center;
}

.dianchi {
    width: 32px;
    height: 15px;
    margin-left: 41px;
    margin-right: 83px;
}

.Gear {
    padding-left: 39px;
    padding-right: 95px;
}
</style>